<template>
  <BasicModal width="60%" title="素材管理" v-bind="$attrs" @register="register" @ok="handleOk">
    <div class="flex">
      <div class="overflow-hidden w-1/6">
        <Card title="素材分组" size="small" :bordered="false">
          <template #extra>
            <a-button @click="onCateAdd" size="small">新增</a-button>
          </template>
          <BasicTree
            :clickRowToExpand="false"
            :fieldNames="{ key: 'id', title: 'name' }"
            :treeData="treeData"
            treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
            @select="handleSelect"
          />
        </Card>
        <ModalCateAdd @register="registerModal" @success="handleCateAddSuccess" />
      </div>
      <div class="w-5/6">
        <div class="text-right mb-2">
          <BasicUpload
            :maxSize="20"
            :maxNumber="10"
            :api="uploadApi"
            :emptyHidePreview="true"
            :accept="['image/*']"
          />
        </div>
        <div class="flex flex-wrap">
          <div v-for="item in state.dataList" :key="item.id" class="inline-block w-1/6 text-center">
            <div
              class="mx-2 mb-4 bg-gray-200 rounded"
              @click="onSelectItem(item)"
              :class="state.selectIdList.includes(item.id) ? 'select-active' : ''"
            >
              <img :src="item.imgUrl" height="100" width="100%" />
              <div class="p-2">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
  import { previewProps } from '../props';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getAlbumPage, getHelpCateList } from '@/modules/shop/api';
  import { uploadApi } from '@/modules/sys/api';
  import { BasicUpload } from '@/components/Upload';
  import { Card } from 'ant-design-vue';
  import ModalCateAdd from '@/modules/shop/help/ModalCateAdd.vue';
  import { BasicTree, TreeItem } from '@/components/Tree';

  const { createMessage } = useMessage();

  const props = defineProps(previewProps);

  const emit = defineEmits(['change', 'register', 'delete']);

  const state = reactive({
    param: {} as any,
    dataList: [] as any,
    selectList: [] as any,
    selectIdList: [] as any,
  });

  const [register, { closeModal }] = useModalInner();
  const { t } = useI18n();

  onMounted(async () => {
    await getAlbumPage({}).then((data) => {
      state.dataList = data.list;
    });
  });

  const treeData = ref<TreeItem[]>([]);

  function handleSelect(keys) {
    emit('select', keys[0]);
  }

  onMounted(async () => {
    await getHelpCateList({}).then((data) => {
      treeData.value = data.list as unknown as TreeItem[];
    });
  });

  //add
  const [registerModal, { openModal }] = useModal();

  const onCateAdd = () => {
    openModal(true, {
      isUpdate: false,
    });
  };

  //选择
  const onSelectItem = (item: any) => {
    console.log(item);

    if (state.selectIdList.includes(item.id)) {
      const index = state.selectIdList.indexOf(item.id);
      state.selectIdList.splice(index, 1);
      state.selectList.splice(index, 1);
    } else {
      state.selectIdList.push(item.id);
      state.selectList.push(item);
    }

    console.log(state.selectIdList);
    console.log(state.selectList);
  };

  //保存
  function handleCateAddSuccess({ isUpdate, values }) {
    if (isUpdate) {
      // 演示不刷新表格直接更新内部数据。
      // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
    } else {
    }
  }

  //   点击保存
  function handleOk() {
    const { maxNumber } = props;

    if (state.selectIdList.length > maxNumber) {
      return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
    }
    closeModal();
    const fileList: any[] = [];

    for (const item of state.selectList) {
      fileList.push({ imageUrl: item.imageUrl, thumbUrl: item.thumbUrl, imageId: item.id });
    }
    emit('change', fileList);
  }
</script>
<style lang="less" scoped>
  .select-active {
    border: 2px saddlebrown solid;
  }
</style>
